<%--
  Created by IntelliJ IDEA.
  User: 周文涛
  Date: 2020/7/26
  Time: 17:37
  前端场次安排页面显示
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>影院场务管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/normalize.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/front/style/CSS/yingyuan.css">
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/front/style/IMG/Blogo.png" type="image/x-icon">
</head>

<body>
<!-- 顶部 -->
<header class="dingbu">
    <nav>
        <a href="#" class="logo"></a>
        <ul class="navbar">
            <li>
                <a href="${pageContext.request.contextPath}/front/index.jsp">首页</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/movie.jsp">电影</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/filmRank.jsp">排行榜</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/screening.jsp">场次安排</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/vipRecharge.jsp">会员卡</a>
            </li>
            <li>
                <a href="${pageContext.request.contextPath}/front/userOrders.jsp">个人信息</a>
            </li>
        </ul>

        <div class="sousuo">
        </div>
        <div class="denglu bian">
            <a href="#">
                <img src="${pageContext.request.contextPath}/front/style/IMG/avatar.png" alt="">
            </a>
            <span class="sanjiao"></span>
            <div>
                <a id="showStatus" href="${pageContext.request.contextPath}/front/accountLogin.jsp">登录</a>
            </div>
        </div>
    </nav>
</header>
<!-- 影院列表 -->
<div class="liebiao">
    <h3>影院列表</h3>
    <ul id="screeningList">

    </ul>
</div>
<!-- 页 -->
<div class="ye">
    <ul>
        <li id="page">

        </li>
    </ul>
</div>

</body>
<script src="${pageContext.request.contextPath}/front/style/JS/jquery-3.2.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var pageNum = 1;
        var pageSize = 20;
        function sendAjax(){
            $.ajax({
                url:"${pageContext.request.contextPath}/front/screening",
                data:{
                    pageNum:pageNum,
                    pageSize:pageSize
                },
                success:function(result){
                    $("#screeningList").empty();
                    $.each(result.list,function(index,val){
                        html = "<li>\n" +
                            "            <div>\n" +
                            "                <a href=\"#\">"+val.film.filmName+"</a>\n" +
                            "                <p>"+val.auditoriums.auditoriumsName+"："+val.screeningStartTime+"</p>\n" +
                            "            </div>\n" +
                            "            <div>\n" +
                            "                <p>\n" +
                            "                    <span>￥</span>\n" +
                            "                    <span>"+val.screeningPrice+"</span>\n" +
                            "                    <span>起</span>\n" +
                            "                </p>\n" +
                            "                <a href=\"#\" data-screeningid='"+val.screeningId+"' class='pay'>选座购票</a>\n" +
                            "            </div>\n" +
                            "        </li>";
                        $("#screeningList").append(html);
                    });

                    var html = "";
                    if(result.pageNum > 1){
                        html +="            <input type=\"radio\" id=\"pre\" title='"+result.prePage+"' name=\"ye\">\n" +
                            "            <label for=\"pre\">\n" +
                            "                <a>上一页</a>\n" +
                            "            </label>"
                    }
                    for(let i = 1; i <= result.pages; i++){
                        if(i == result.pageNum){
                            html += "<input type=\"radio\" id='"+i+"' title='"+i+"' name=\"ye\" checked>\n" +
                                "            <label for=\""+i+"\">\n" +
                                "                <a>"+i+"</a>\n" +
                                "            </label>";
                        }else{
                            html += "<input type=\"radio\" id='"+i+"' title='"+i+"' name=\"ye\">\n" +
                                "            <label for=\""+i+"\">\n" +
                                "                <a>"+i+"</a>\n" +
                                "            </label>";
                        }

                    }
                    if(result.pageNum<result.pages){
                        html +=
                            "            <input type=\"radio\" id=\"xia\" title='"+result.nextPage+"' name=\"ye\">\n" +
                            "            <label for=\"xia\">\n" +
                            "                <a>下一页</a>\n" +
                            "            </label>"
                    }
                    $("#page").html(html);



                },
                error:function(){
                    alert("ajax请求失败");
                }
            });
        }
        sendAjax();

        $(document).on("click","#page input",function(){
            pageNum = $(this).prop("title");
            sendAjax();
        })
    });
</script>
<script src="${pageContext.request.contextPath}/back/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: '${pageContext.request.contextPath}/back/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['table'], function(){
        var $ = layui.$;

        var accountId = "${sessionScope.account.accountId}";
        $(document).on("click",".pay",function(){
           if(accountId != ""){
               let screeningId = $(this).data("screeningid");
               layer.open({
                   type: 2
                   ,title:"选座"
                   ,content:"${pageContext.request.contextPath}/front/seat.jsp?screeningId="+screeningId
                   ,area: ['650px', '720px']
                   ,btn: ['确定', '取消']
               });
           }else{
               layer.msg("请登录");
           }
        });



    });
</script>
<script type="text/javascript">
    // 判断是否登录
    var account = "${sessionScope.account}";
    if(account != ""){
        $(".denglu img").prop("src","${pageContext.request.contextPath}/download/img?fileName=${sessionScope.account.accountPicture}");
        $("#showStatus").text("退出登录");
        $("#showStatus").prop("src","#");
    }
    $(document).on("click","#showStatus",function(){
        if($(this).text()=="退出登录"){
            $.ajax({
                url:"${pageContext.request.contextPath}/front/logout",
                success:function(){
                    console.log("退出成功");
                },
                error:function(){
                    console.log("退出失败");
                }
            });
        }
    })

</script>
</html>
